<template>
<!--  open-names-->
  <div style="width: 100%;height: 100%;overflow: auto;">
    <Menu theme="dark" accordion style="width: 100%;" :active-name="activeName" :open-names="[openNames]">
      <template v-for="item in navList">
        <Submenu :name="item.name">
          <template #title>{{item.meta.title}}</template>
          <template v-for="items in item.children">
            <MenuItem :name="items.path" :to="items.path">{{items.meta.title}}</MenuItem>
          </template>
        </Submenu>
      </template>
    </Menu>
  </div>
</template>
<script>

import {getCurrentInstance,nextTick,reactive, toRefs,toRef,onBeforeMount,onMounted,onBeforeUpdate,onUpdated,onBeforeUnmount,onUnmounted, ref,defineComponent,toRaw,watch} from 'vue'

import { useRouter,useRoute } from "vue-router";
import router from '../router';

//reactive
export default defineComponent({
  name: 'navList',//组件名称
  components: {},//组件引用
  setup () {
    const navList = router.subsetRoutes;

    const state = reactive({
      navList:router.subsetRoutes,
      activeName:'',
      openNames:'',
      aaa:'',
    });


    // 其他的生命周期
    onBeforeMount (() => {//beforeMount挂载前状态 // console.log("App ===> 相当于 vue2.x 中 beforeMount")
      state.activeName = router.router.currentRoute.value.path;
      if(!!state.activeName && state.activeName.length > 0 && state.activeName != '/'){
        state.openNames = router.router.currentRoute.value.matched[0].name;
      }


    })
    onMounted (() => {//mounted 挂载结束状态
      // console.log(navList)
      // console.log("App ===> 相当于 vue2.x 中 mounted")
    })

    // 注意，onBeforeUpdate 和 onUpdated 里面不要修改值
    onBeforeUpdate (() => {//beforeUpdate 更新前状态 // console.log("App ===> 相当于 vue2.x 中 beforeUpdate")
    })

    onUpdated (() => {//updated 更新完成状态 // console.log("App ===> 相当于 vue2.x 中 updated")
    })

    onBeforeUnmount (() => {//beforeDestroy 销毁前状态  // console.log("App ===> 相当于 vue2.x 中 beforeDestroy")
    })

    onUnmounted (() => {//destroyed 销毁完成状态  // console.log("App ===> 相当于 vue2.x 中 destroyed")
    })


    return {
      ...toRefs(state),
    }
  }
})


</script>
<style lang="less">

</style>
